<template>
	<view class="right_right_touch_box flex_js">
		<view class="left">
			<view :class="['item', wordIndex === index? 'item_active' : '']" @tap="wordsClick(index)" v-for="(item, index) in words" :key="index">
				<text>{{ item.name }}</text>
				<view class="item_image" v-if="wordIndex === index">
					<image src="@/static/images/icon/success.svg" mode="aspectFit" v-if="isEliminate && wordFlag"></image>
					<image src="@/static/images/icon/error.svg" mode="aspectFit" v-if="!isEliminate && wordFlag"></image>
				</view>
			</view>
		</view>
		<view class="right">
			<view :class="['item', chineseIndex === index? 'item_active' : '']"  @tap="chineseClick(index)" v-for="(item, index) in chineses" :key="index">
				<text>{{ item.name }}</text>
				<view class="item_image" v-if="chineseIndex === index">
					<image src="@/static/images/icon/success.svg" mode="aspectFit" v-if="isEliminate && chineFlag"></image>
					<image src="@/static/images/icon/error.svg" mode="aspectFit" v-if="!isEliminate && chineFlag"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ddpFirstWords,ddpLastWords } from '@/api/study/study.js'
	export default {
		data() {
			return {
				wordFlag:false,
				chineFlag:false,
				wordIndex: '',
				chineseIndex: '',
				isEliminate: '',
				dataList:[],
				words: [
					// {
					// 	id: '1',
					// 	name: 'book'
					// },
					// {
					// 	id: '2',
					// 	name: 'ruler'
					// },
					// {
					// 	id: '3',
					// 	name: 'pencil'
					// },
					// {
					// 	id: '4',
					// 	name: 'schoolbag'
					// },
					// {
					// 	id: '5',
					// 	name: 'teacher'
					// },
				],
				chineses: [
					// {
					// 	id: '1',
					// 	name: '书；预定'
					// },
					// {
					// 	id: '2',
					// 	name: '尺子；统治者'
					// },
					// {
					// 	id: '3',
					// 	name: '铅笔'
					// },
					// {
					// 	id: '4',
					// 	name: '书包'
					// },
					// {
					// 	id: '5',
					// 	name: '教师'
					// },
				],
				page:1,
			}
		},
		onLoad() {
			
			
			console.log(this.chineses);
			
			this.getFWords()
		},
		watch: {
			words(newData) {
				
				if(newData.length === 0 && this.page>3) {
					uni.navigateTo({
						url: '/pages/practices/complete/complete'
					})
				}
			},
			// chineses(newData1) {
			// 	console.log('data1', newData1);
			// }
		},
		methods: {
			sortList(list){
				return list = [...list].sort(() => Math.random() - 0.5);
			},
			
			buildList(dataList){
				// 为数组中的每个对象添加 id 属性
				 const arrayWithIds = dataList.map((obj, index) => {
				     const key = Object.keys(obj)[0];
				     return {
				         id: index + 1,
				         name: key,
				         chinese: obj[key]
				     };
				 });
				 console.log(dataList);
				
				// 拆分成 id 和单词的数组以及 id 和中文释义的数组
				let idAndWord = arrayWithIds.map(item => ({ id: item.id, name: item.name }));
				let idAndChinese = arrayWithIds.map(item => ({ id: item.id, name: item.chinese }));
				//打乱顺序
				idAndChinese = this.sortList(idAndChinese)
				return { idAndWord, idAndChinese };
			},
			async getFWords(){
				await ddpFirstWords().then(res=>{
					 if(res.code === 200) {
						this.dataList = res.data
						console.log("原始第一组数据",this.dataList);
						//  // 为数组中的每个对象添加 id 属性
						//  const arrayWithIds = this.dataList.map((obj, index) => {
						//      const key = Object.keys(obj)[0];
						//      return {
						//          id: index + 1,
						//          name: key,
						//          chinese: obj[key]
						//      };
						//  });
						//  console.log(this.dataList);
						
						// // 拆分成 id 和单词的数组以及 id 和中文释义的数组
						// this.words = arrayWithIds.map(item => ({ id: item.id, name: item.name }));
						// this.chineses = arrayWithIds.map(item => ({ id: item.id, name: item.chinese }));
						// //打乱顺序
						// this.chineses = this.sortList(this.chineses)
						const result = this.buildList(this.dataList)
						this.words = result.idAndWord
						this.chineses = result.idAndChinese
						 console.log(1,this.words);
						 console.log(2,this.chineses);
					 }
					
				 })
			},
			
			wordsClick(index) {
				this.wordIndex = index          
				console.log("点击单词选择的下标",this.wordIndex,this.chineseIndex);
				if(this.chineseIndex===''){
					return
				}
				console.log("点击单词",this.words[index].id,this.chineses[this.chineseIndex].id);
				if(this.words[index].id == this.chineses[this.chineseIndex].id) {
					this.wordFlag = true
					this.isEliminate = true
					this.chineFlag = true
					
					this.getEliminate(index,this.chineseIndex)
				} else {
					this.wordFlag = true
					this.chineFlag = true
					
					this.isEliminate = false
					
					
				}
				
				// if (index === this.chineseIndex) {
				// 	this.isEliminate = true
				// 	this.getEliminate(index)
				// } else {
				// 	this.isEliminate = false
				// 	// this.getRese()
				// }
			},
			chineseClick(index) {
				this.chineseIndex = index
				console.log("点击翻译选择的下标",this.wordIndex,this.chineseIndex);
				if(this.wordIndex===''){
					return
				}
				console.log("点击翻译",this.words[this.wordIndex].id,this.chineses[index].id);
				if(this.chineses[index].id == this.words[this.wordIndex].id ) {
					this.chineFlag=true
					this.isEliminate = true
					this.wordFlag = true
					
					this.getEliminate(this.wordIndex,index)
				} else {
					this.chineFlag=true
					this.isEliminate = false
					this.wordFlag = true
				}
				
				// if(this.words[index].id ==this.chineses[index].id) {
				// 	this.isEliminate = true
				// 	this.getEliminate(index)
				// } else {
				// 	this.isEliminate = false
				// }
				
				// if (index === this.wordIndex) {
				// 	this.isEliminate = true
				// 	this.getEliminate(index)
				// } else {
				// 	this.isEliminate = false
				// 	// this.reset()
				// }
			},
			// 消除数组
			getEliminate(eIndex,cIndex) {
				setTimeout(() => {
					// 找到要删除元素的索引
					// const indexToDelete = this.chineses.findIndex(item => item.id === idToDelete);
					
					// if (indexToDelete !== -1) {
					//     // 使用 splice 方法删除元素
					//     chineses.splice(indexToDelete, 1);
					// }
					
					
					this.words.splice(eIndex, 1)
					this.chineses.splice(cIndex, 1)
					this.wordFlag = false
					this.chineFlag = false
					this.reset()
					
					if(this.words.length ==0) {
						this.page ++;
						if(this.page <=3) {
							ddpLastWords(this.page).then(res=>{
								if (res.code === 200) {
									console.log("第"+this.page+"组",res.data);
									const result = this.buildList(res.data)
									this.words = result.idAndWord
									this.chineses = result.idAndChinese
									console.log(1,this.words);
									console.log(2,this.chineses);
								}
							})
						}
						
					}
				}, 500)
				
			},
			// 重置
			reset() {
				this.wordIndex = ''
				this.chineseIndex = ''
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.right_right_touch_box {
	height: 100vh;
	background: $uni-bg-color-page;
	padding: 100rpx 30rpx 0;
	
	.left, .right {
		width: 47%;
		
		.item {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			border-radius: 12rpx;
			margin-bottom: 50rpx;
			background-color: $uni-bg-color;
			text-align: center;
			box-shadow: 2rpx 6rpx 16rpx #999999;
			position: relative;
			
			.item_image {
				width: 52rpx;
				height: 100%;
				position: absolute;
				right: 10rpx;
				top: 0;
				
				image {
					width: 100%;
					height: 100%;
				}
			} 
		}
		
		.item_active {
			background-color: $uni-bg-color-opacity;
			color: $uni-text-color-primary;
		}
	}
}
</style>
